<template>
  <div>

  <div class="article-container">
<!--   右侧栏 -->
    <div class="tag-card-box">
<!--     公告 -->
      <el-card class="tag-card" :body-style="{ padding: '15px' }">
        <div class="tag-box">
          <div class="tag-title">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=404207258,1353020592&fm=26&gp=0.jpg" alt="">
            <span >公告</span>
          </div>
          <hr>
          <div class="notice">
            欢迎来到codeliu打造的博客网站，这里的文章主要是前端学习内容哦，
            小伙伴可以在文章中学习相应的前端知识
          </div >
        </div>
      </el-card>
      <!-- 文章标签 -->
      <el-card class="tag-card" :body-style="{ padding: '15px' }">
        <div class="tag-box">
          <div class="tag-title">
            <i class="el-icon-collection-tag i"></i>
            <span >文章标签</span>
          </div>
          <hr>
          <div class="tag-bottom">
            <div
                :style="`background-color: ${tagColor[parseInt(Math.random() * 100 % tagColor.length)]};`"
                class="tag"
                v-for="(item,i) in tagObjList"
                @click="tagSearch(item.article_tag)"
                :key="i">
              <span class="tag-left">{{ item.article_tag }}</span>
              <span class="tag-right">{{ item.count }}</span>
            </div>
          </div >


        </div>
      </el-card>
<!--     最近文章 -->
      <el-card class="tag-card" :body-style="{ padding: '15px' }">
        <div class="tag-box">
          <div class="tag-title">
            <i class="el-icon-document i"></i>
            <span >最近文章</span>
          </div>
          <hr>
          <div class="recentArticle">
            <div @click="titleSearch(item.article_title)" v-for="(item,i) in recentArticles" :key="i">
              <img :src="item.article_img" alt="">
              <span>{{ item.article_title }}</span>
            </div>
          </div >
        </div>
      </el-card>
<!--      音乐播放器-->
      <el-card class="tag-card" :body-style="{ padding: '15px' }">
        <div class="tag-box">
          <div class="tag-title">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602482712629&di=2b33b4331317c5ab95dae38dee9c70ac&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F93%2F51%2F1656f2a15a20359.jpg" alt="">
            <span >音乐鉴赏</span>
          </div>
          <hr>
          <div class="notice">
            <div>
              看累了？没关系，来首歌放松一下
            </div>
            <div>
              <iframe style="width: 100%" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1463165983&auto=0&height=66"></iframe>
            </div>
          </div >
        </div>
      </el-card>
    </div>
<!--  文章列表  -->
    <div class="article-list-container">
    <div class="article-list" v-for="(item,i) in articleFourList" :key="i">
      <div class="level-bottom" :style="`background-color: ${levelBottomColor[parseInt(i%levelBottomColor.length)]};`">
      </div>
      <div class="level-top" :style="`border-top: 65px solid ${levelTopColor[parseInt(i%levelTopColor.length)]};`">
      </div>
      <div class="level-top-text">{{ i + 1}}</div>
      <div class="level-middle">
        <div @click="jumpArticleChild(item._id, item.article_child)" class="article_img">
          <img :src="`${item.article_img}`"  alt="">
        </div>
        <div class="middle-right">
          <div class="article_title">
            <h3 @click="jumpArticleChild(item._id, item.article_child)">{{item.article_title}}</h3>
          </div>
          <div class="article_author">
            <span style="margin-right: 15px">作者：{{ item.article_author }}</span>
             <span>发布时间：{{ item.article_time }}</span>
          </div>
          <div class="article_introduction">
            {{ item.article_introduction }}
          </div>
          <div class="middle-right-bottom">
            <div class="article_tag cursor" @click="jumpArticleChild(item._id, item.article_child)">
              <span>{{ item.article_tag }}</span>
            </div>
            <div class="middle-right-bottom-right">
              <span class="article_thumbs">
                <span @click="addArticleThumbs(item._id)" class="iconfont i hover">&#xe60c;</span>
                <span>{{ item.article_thumbs }}</span>
              </span>
              <span class="article_preview cursor" @click="jumpArticleChild(item._id, item.article_child)">
                <i class="el-icon-view i"></i>
                <span>{{ item.article_preview }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
      <el-card class="pagination">
        <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
        <el-button size="mini"  @click="getArticleList" class="allArticle" type="primary" round>全部文章</el-button>
      </el-card>
    </div>
<!-- 子组件  -->

  </div>
    <e-bottom></e-bottom>
  </div>
</template>

<script>
import bottom from "@/components/bottom";
export default {
  data () {
    return {
      tagColor: ['#F9EBEA','#F5EEF8','#D5F5E3','#E8F8F5','#82E0AA','#A3E4D7','#85C1E9','#F8C471','#D7BDE2','#FEF9E7','#B78A8D'],
      levelBottomColor: ['#A96803','#8C8E8F','#5F412C','#566266'],
      levelTopColor: ['#FFC414','#D2D8D9','#DA832E','#54C0F1'],
      articleList: [],
      tagList: [],
      tagObjList: [],
      recentArticles: [],
      total: '',
      articleFourList: [],
      tagSearchList: []
    }
  },
  created() {
    this.getArticleList()
  },
  methods:{
    async getArticleList () {
      this.articleList = []
      this.tagList = []
      this.tagObjList = []
      this.recentArticles = []
      this.total = ''
      this.articleFourList = []
      this.tagSearchList = []
      const { data: res } = await this.$http.get('getarticle')
      this.articleList = res.articlelist.reverse()
      this.articleFourList = this.articleList.slice(0,4)
      this.total = this.articleList.length % 4 == 0 ? parseInt(this.articleList.length/4) * 10  : parseInt((this.articleList.length/4) +1 ) * 10
      for (let i = 0; i < 5; i++) {
        this.recentArticles.push(this.articleList[i])
      }
      let obj = {}
      res.articlelist.forEach(item => {
        this.tagList.push(item.article_tag)
      })
      this.tagList.forEach((item,i) => {
        if(!obj[this.tagList[i]]){
          obj[this.tagList[i]]=1 //这里如果不给个值，那么obj还是为空。
        }else{
          obj[this.tagList[i]]++
        }
      })
      for(var key in obj) {
        var b = {
          article_tag: key,
          count: obj[key]
        }
        this.tagObjList.push(b)
      }
    },
    async addArticleThumbs (id) {
      const { data: res } = await this.$http.put('changeThumbs', {
        _id: id,
        username: window.sessionStorage.getItem('username')
      })
      if (res.status !== 200) {
        return this.$message.error({
          message: res.msg,
          center: true
        })
      }
      this.articleList.forEach(item => {
        if (item._id == id) {
          item.article_thumbs = parseInt(item.article_thumbs) + 1
          return
        }
      })

    },
    async jumpArticleChild (id, articleChild) {
      this.$router.push(`/article/${articleChild}`)
      const { data: res } = await this.$http.put('changePreview', {
        _id: id
      })

    },
    handleCurrentChange(val) {
      this.articleFourList = this.articleList.slice((parseInt(val) - 1) * 4 ,(parseInt(val) - 1) * 4 + 4)
    },
    async tagSearch (articleTag) {
      const { data: res } = await this.$http.get('tagSearch', {
        params: {
          articleTag
        }
      })
      this.articleList = res.articleTaglist
      this.articleFourList = this.articleList.slice(0,4)
      this.total = this.articleList.length % 4 == 0 ? parseInt(this.articleList.length/4) * 10  : parseInt((this.articleList.length/4) +1 ) * 10
    },
    async titleSearch (articleTitle) {
      const { data: res } = await this.$http.get('titleSearch', {
        params: {
          articleTitle
        }
      })
      this.articleList = res.articleTitlelist
      this.articleFourList = this.articleList.slice(0,4)
      this.total = this.articleList.length % 4 == 0 ? parseInt(this.articleList.length/4) * 10  : parseInt((this.articleList.length/4) +1 ) * 10
    }
  },
  components: {
    eBottom: bottom
  }
}
</script>

<style lang="less" scoped>
.article-container{
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  margin-bottom: 50px;
  .el-card{
    .el-card__body{
      padding: 10px !important;
    }
  }

  .tag-card{
    margin-top: 8px;
    width: 360px;
    //height: 200px;
    margin-left: 20px;
    border-radius: 10px;
    &:hover{
      box-shadow: 0 0 20px #444;
    }
    &:nth-child(1){
      margin-top: 30px;
    }

    .tag-box{
      margin: 0 auto;
      width: 100%;
      //height: 200px;
      .notice{
        line-height: 30px;
        font-size: 16px;
      }
      .recentArticle{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div{
          flex: 1;
          line-height: 50px;
          font-size: 16px;
          border-bottom: 1px solid #eee;
          display: flex;
          align-items: center;
          img{
            width: 40px;
            height: 40px;
            margin-right: 20px;
            border-radius: 50%;
            margin: 0 5% 0 20%;
          }
          &:hover{
            background-color: skyblue;
            cursor: pointer;
            color: blue;
            img{
              transform:rotate(360deg);
              -ms-transform:rotate(360deg); 	/* IE 9 */
              -moz-transform:rotate(360deg); 	/* Firefox */
              -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
              -o-transform:rotate(360deg); 	/* Opera */
              transition: 0.7s ease;
            }
          }
        }
      }
      .tag-title{
        text-align: center;
        font-size: 28px;
        padding: 0px 0 10px 0;
        color: #3C4858;
        display: flex;
        align-items: center;
        justify-content: center;
        //color: orange;
        .i{
          margin-right: 3%;
          font-size: 26px;
        }
        img{
          width: 30px;
          height: 30px;
          margin-right: 3%;
        }
        &:hover{
          transform: translateX(10px);
          transition: 0.5s ease;
          cursor: pointer;
        }
      }
      .tag-bottom{
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .tag{
          margin-bottom: 15px;
          margin-right: 17px;
          background-color: #A3E4D7;
          border-radius: 10px;
          padding: 10px 15px;
          display: flex;
          align-items: flex-start;
          &:hover{
            transform: translateY(-5px);
            box-shadow: 0px 5px 0px #eee;
            cursor: pointer;
          }
          .tag-left{
            font-size: 16px;
            //margin-right: 1px;
          }
          .tag-right{
            color: red;
          }
        }

      }
    }
  }
  .article-list-container{
    margin-top: 25px;
    .pagination{
      //margin-top: -5px;
      width: 100%;
      text-align: center;
      margin-left: 4px;
      border-radius: 7px;
      position: relative;
      display: flex;
      justify-content: center;
      .allArticle{
        position: absolute;
        right: 10px;
        top: 20px;
      }
    }
  }
  .article-list{
    margin: 0 auto;
    //width: 850px;
    width: 810px;
    height: 240px;
    //background-color: red;
    position: relative;
    &:hover{
      transform: translateY(-5px);
    }
    .level-bottom{
      width: 67px;
      height: 71px;
      background-color: #A96803;
      border-radius: 8px;
      position: absolute;
      z-index: 1;
    }
    .level-middle{
      box-shadow: 0 0 10px #8C8E8F;
      border-radius: 7px;
      margin: 0 auto;
      width: 100%;
      height: 226px;
      background-color: #fff;
      position: absolute;
      top: 5px;
      left: 6px;
      z-index: 2;
      display: flex;
      .article_img{
        width: 40%;
        height: 100%;
        position: relative;
        &:hover{
          cursor: pointer;
        }
        img{
          width: 210px;
          height: 155px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          border-radius: 5px;
        }
      }
      .middle-right{
        width: 60%;
        height: 100%;
        .article_title{
          margin-top: 32px;
          font-size: 18px;
          color: #333;
          &:hover{
            color: #3F8CD9;
            cursor: pointer;
            transform: translateX(20px);
            transition: 0.5s ease;
            //animation: ease;
          }
        }
        .article_author{
          margin-top: 10px;
          color: #8c8c8c;
          font-size: 14px;

        }
        .article_introduction{
          margin-top: 10px;
          color: #8c8c8c;
          font-size: 14px;
          margin-right: 10px;

        }
        .middle-right-bottom{
          margin-top: 18px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .article_tag{
            display: flex;
            align-items: center;
            span{
              border-radius: 5px;
              margin-right: 10px;
              display: inline-block;
              padding: 2px 5px;
              //width: 50px;
              height: 28px;
              border: 1px solid #000;
              line-height: 28px;
              text-align: center;
              color: #558CD9;
              font-size: 16px;
            }

          }
          .middle-right-bottom-right{
            margin-right: 25px;
            font-size: 16px;
            color: #000;
            .hover:hover{
              cursor: pointer;
              color: #3F8CD9;
            }
            .i{
              margin-right: 5px;
            }
            .article_thumbs{
              margin-right: 15px;
            }
            .article_preview{

            }
          }
        }
      }
    }
    .level-top{
      width: 0;
      height: 0;
      border-top: 65px solid #FFC414;
      border-right: 60px solid transparent;
      position: absolute;
      z-index: 3;
    }
    .level-top-text{
      position: absolute;
      z-index: 3;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      top: 10px;
      left: 8px;
    }
  }
  .cursor{
    cursor: pointer;
  }


}
@media (min-width: 992px) and (max-width: 1300px) {
  .article-container{
    .tag-card-box{
      width: 25%;
    }
    .tag-card{
      width: 100%;
    }
    .article-list-container{
      width: 68%;
      .article-list{
        width: 100%;
      }
    }
  }

}
@media (min-width: 768px) and (max-width: 991px) {
  .article-container{
    display: block;
    position: relative;
    .tag-card-box{
      position: relative;
      display: flex;
      flex-direction: column-reverse;
    }
    .tag-card{
      margin-top: 20px;
      width: 46%;
      &:nth-child(2){
        margin-top: 10px;
      }
      &:nth-child(3){
        position: absolute;
        right: 20px;
        top: 200px;
      }
      &:nth-child(1){
        position: absolute;
        right: 20px;
        top: -10px;
      }
    }
    .article-list-container{
      margin-top: 25px;
      width: 95%;
      margin-left: 8px;
      .article-list{
        width: 95%;
      }
    }
  }

}
@media (max-width: 767px) {

  .article-container{
    display: block;
    .tag-card-box{
      width: 90%;
      position: relative;
    }
    .tag-card{
      width: 100%;
      &:nth-child(1){
        height: 190px;
      }
      &:nth-child(2){
        margin-top: 610px;
      }
      &:nth-child(3){
        position: absolute;
        top: 425px;
      }
      &:nth-child(4){
        position: absolute;
        top: 190px;
      }
    }
    .article-list-container{
      width: 95%;
      margin-left: 6px;
      margin-top: 30px;

      .article-list{
        width: 100%;
        .level-middle{
          .article_img{
            img{
              width: 80px;
              height: 80px;
            }
          }
          .middle-right{
            transform: translateY(-12px);
          }
        }
      }
    }
  }
}
</style>
